<script src="<{$block.script_url}><{$block.script}>" type="text/javascript"></script>
<script src="<{$block.script_url}>jquery.hoverIntent.minified.js" type="text/javascript"></script>

<{if $block.vertical == TRUE}>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#mega-menu-v-<{$block.block_id}>').dcVerticalMegaMenu({
				rowItems: '4',
				speed: 'fast',
				effect: '<{$block.effect}>',
				direction: '<{$block.direction}>'
			});
		});
	</script>
<{else}>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			jQuery('#mega-menu-<{$block.block_id}>').dcMegaMenu({
				rowItems: '4',
				speed: 'fast',
				effect: '<{$block.effect}>',
				event: '<{$block.event}>',
				fullWidth: <{$block.fullWidth}>
			});
		});
	</script>
<{/if}>

<ul id="<{if $block.vertical == FALSE}>mega-menu-<{$block.block_id}><{else}>mega-menu-v-<{$block.block_id}><{/if}>" class="<{if $block.vertical == FALSE}>mega-menu <{$block.color_class}><{else}>mega-menu-v<{/if}>">
	<{if $block.megamenu.display_home}>
		<li style="">
			<a href="<{$icms_url}>" title="<{$block.megamenu.home_title}>">
				<{if $block.megamenu.display_img == 1 || $block.megamenu.display_img == 2 }>
					<{$block.megamenu.home_title}>
				<{/if}>
			</a>
		</li>
	<{/if}>
	<{foreach item=item from=$block.mega_items}>
		<{includeq file="db:menu_single_item.html"}>
	<{/foreach}>
</ul>

<{if $block.vertical == FALSE}>
	<style type="text/css">
		#mega-menu-<{$block.block_id}> {font: normal 13px Arial, sans-serif; position: relative; padding: 0; margin: 0;}
		#mega-menu-<{$block.block_id}> .sub ul { display: block; }
		#mega-menu-<{$block.block_id}> { background: #222; width: 100%; height: 40px; position: relative; }
		#mega-menu-<{$block.block_id}> li {list-style: none !important; float: left; margin: 0; padding: 0; font-weight: bold;}
		#mega-menu-<{$block.block_id}> li a { float: left; display: block; color: #fff; padding: 12px 25px; background: #222; text-decoration: none;}
		#mega-menu-<{$block.block_id}> li.mega-hover a, #mega-menu-<{$block.block_id}> li.mega-hover a:hover { background: #CCC; color: #000; }
		#mega-menu-<{$block.block_id}> li a:hover { background: #999; color: #000; }
		#mega-menu-<{$block.block_id}> li .sub-container { position: absolute; }
		#mega-menu-<{$block.block_id}> li .sub { background: #efefef; padding: 15px; border: 1px solid #ccc; }
		#mega-menu-<{$block.block_id}> li .sub .row { width: 100%; overflow: hidden; clear: both; }
		#mega-menu-<{$block.block_id}> li .sub li { list-style: none !important; float: none; width: 170px; font-size: 1em; font-weight: normal; }
		#mega-menu-<{$block.block_id}> li .sub li.mega-hdr { margin: 0 10px 10px 0; float: left; }
		#mega-menu-<{$block.block_id}> li .sub li.mega-hdr.last { margin-right: 0; }
		#mega-menu-<{$block.block_id}> li .sub a { background: none; color: #111; padding: 7px 10px; display: block; float: none; font-size: 0.9em; }
		#mega-menu-<{$block.block_id}> li .sub li.mega-hdr a.mega-hdr-a { padding: 5px 15px; margin-bottom: 5px; background: #6B6B6B; text-transform: uppercase; font-weight: bold; color: #fff; }
		#mega-menu-<{$block.block_id}> li .sub li.mega-hdr a.mega-hdr-a:hover { color: #000; }
		#mega-menu-<{$block.block_id}> .sub li.mega-hdr li a { padding: 4px 5px; font-weight: normal; }
		#mega-menu-<{$block.block_id}> .sub li.mega-hdr li a:hover { color: #a32403; background: #efefef; }
		#mega-menu-<{$block.block_id}> .sub ul li { padding-right: 0; }
		#mega-menu-<{$block.block_id}> li .sub-container.non-mega .sub { padding: 10px; }
		#mega-menu-<{$block.block_id}> li .sub-container.non-mega li { padding: 0; width: 190px; margin: 0; }
		#mega-menu-<{$block.block_id}> li .sub-container.non-mega li a { padding: 7px 5px 7px 22px; }
		#mega-menu-<{$block.block_id}> li .sub-container.non-mega li a:hover { color: #a32403; background: #efefef; }
	</style>
<{else}>
	<style type="text/css">
		#mega-menu-v-<{$block.block_id}> li {list-style-type: none !important;}
	</style>
<{/if}>
